import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const NgInitBetterPracticeView = defineView({
  controller: class {
    static $inject = ["$scope"];

    /**
     * @param {ng.WIScope} $scope
     */
    constructor($scope) {
      this.$scope = $scope;
    }

    $onInit() {
      this.list = [
        ["a", "b"],
        ["c", "d"],
      ];
    }
  },
  controllerAs: "$ctrl",
  template: /* HTML */ html`
    <div>
      <math xmlns="http://www.w3.org/1998/Math/MathML" style="font-size: 24px;">
        <mrow>
          <mo>[</mo>
          <mtable>
            <mtr>
              <mtd
                ><msub><mi> a </mi></msub></mtd
              >
              <mtd
                ><msub><mi> b </mi></msub></mtd
              >
              <!-- <mtd><msub><mi>0</mi></msub></mtd> -->
              <!-- <mtd><msub><mi>0</mi></msub></mtd> -->
            </mtr>
            <mtr>
              <mtd
                ><msub><mi> c </mi></msub></mtd
              >
              <mtd
                ><msub><mi> d </mi></msub></mtd
              >
              <!-- <mtd><msub><mi>0</mi></msub></mtd> -->
              <!-- <mtd><msub><mi>0</mi></msub></mtd> -->
            </mtr>
            <!-- <mtr>
              <mtd><msub><mi>0</mi></msub></mtd>
              <mtd><msub><mi>0</mi></msub></mtd>
              <mtd><msub><mi>1</mi></msub></mtd>
              <mtd><msub><mi>0</mi></msub></mtd>
            </mtr> -->
            <!-- <mtr>
              <mtd><msub><mi>0</mi></msub></mtd>
              <mtd><msub><mi>0</mi></msub></mtd>
              <mtd><msub><mi>0</mi></msub></mtd>
              <mtd><msub><mi>1</mi></msub></mtd>
            </mtr> -->
          </mtable>
          <mo>]</mo>
        </mrow>
      </math>
      <br />
      <strong>list</strong>
      <div ng-repeat="innerList in $ctrl.list" ng-init="outerIndex = $index">
        <div ng-repeat="value in innerList" ng-init="innerIndex = $index">
          <span class="example-init"
            >[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span
          >
        </div>
      </div>
    </div>
  `,
});

export default NgInitBetterPracticeView;
